<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="" name="description" />
    <meta content="webthemez" name="author" />
    <title>Bootstrap Admin Theme</title>
    <!-- Bootstrap Styles-->
    <link href="../../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../../assets/css/font-awesome.css" rel="stylesheet" />

    <link href="../../assets/css/select2.min.css" rel="stylesheet" >
    <link href="../../assets/css/checkbox3.min.css" rel="stylesheet" >
    <!-- Custom Styles-->
    <!-- <link href="assets/css/custom-styles.css" rel="stylesheet" />-->
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <script src="../../js/layui/layui.js"></script>
	<link rel="stylesheet" href="../../css/img.css">
</head>
<body>


<!--/. NAV TOP  -->

<div id="page-wrapper" >
    <br /><br /><br />
    <div style="margin-left:-3%;">
    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group" style="margin-left: 3%;">
                <label for="exampleInputName2">选择接收人角色:</label>
                <select class="selectbox">
	                <option value="AK">Alaska</option>
	                <option value="HI">Hawaii</option>
	                <option value="IL">Illinois</option>
	                <option value="IA">Iowa</option>
	                <option value="KS">Kansas</option>
	                <option value="KY">Kentucky</option>
	        </select>
            </div>
           <div class="form-group" style="margin-left: 1%;">
                <label for="exampleInputName2">选择接收人:</label>
                <select class="selectbox">
	                <option value="AK">Alaska</option>
	                <option value="HI">Hawaii</option>
	                <option value="IL">Illinois</option>
	                <option value="IA">Iowa</option>
	                <option value="KS">Kansas</option>
	                <option value="KY">Kentucky</option>
	        </select>
            </div>
        <a href="#" class="btn btn-success">申请</a>
        <a href="submitApply.html" class="btn btn-info">返回</a>
        <a href="#" class="btn btn-warning example">查看示例</a>
        </form>
    </div>
    </div>
    <div class="header">
        <h1 class="page-header" style="text-align: center">
            公务交通 <small>（员工个人）</small>
        </h1>

    </div>


    <!-- <div id="page-inner"> -->
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">基本信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Basic Table
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table">

                                            <tr>
                                                <td style="text-align: right;">
                                                    报账人：
                                                </td>
                                                <td>
                                                    张三
                                                </td>

                                                <td style="text-align: right;">
                                                    报账单位名称：
                                                </td>
                                                <td>
                                                    软通动力
                                                </td>
                                                <td style="text-align: right;">报账人电话：</td>
                                                <td>
                                                    1234567890
                                                </td>
                                            </tr>
                                            <tr>
											    <td style="text-align: right;">
                                                    公司代码：
                                                </td>
                                                <td>
                                                    9876543210
                                                </td> 
                                                <td style="text-align: right;">
                                                    报账时间：
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="Jane Doe">
                                                </td>
                                                <td style="text-align: right;">费用发生日：</td>
                                                <td>
                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="Jane Doe">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    报账单号：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
												<td style="text-align: right;">
                                                    预算指标：
                                                </td>
                                                <td>
                                                    <div class="form-group" style="margin-left: 3%;">
														<select class="selectbox">
															<option value="AK">国内差旅</option>
															<option value="HI">员工福利</option>
															<option value="IL">公务交通</option>
															<option value="IA">物业管理</option>
														</select>
													</div>
                                                </td>
                                                <td style="text-align: right;">发票类型：</td>
                                                <td>
                                                    <div class="form-group" style="margin-left: 3%;">
													<select class="selectbox">
														<option value="AK">Alaska</option>
														<option value="HI">Hawaii</option>
														<option value="IL">Illinois</option>
														<option value="IA">Iowa</option>
														<option value="KS">Kansas</option>
														<option value="KY">Kentucky</option>
													</select>
													</div>
                                                </td>
                                            </tr>
                                            <tr >
											    <td style="text-align: right;">
                                                    收支方式：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example">
                                                </td> 
                                                <td style="text-align: right;">
                                                    是否员工代垫：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                                <td style="text-align: right;">
                                                    是否个人专项：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="text-align: right;">
                                                    附单据张数：
                                                </td>
                                                <td>
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                                <td style="text-align: right;">
                                                    报账说明：
                                                </td>
                                                <td colspan="3">
                                                    <input type="search" class="form-control input-sm" aria-controls="dataTables-example" placeholder="">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">明细信息</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <div class="panel panel-default">
                                <!--<div class="panel-heading">
                                    Kitchen Sink
                                </div>-->
                                <div class="panel-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>是否使用成本/资本预算</th> 
                                                <th>预算责任中心</th>
												<th>记账成本中心</th>
                                                <th>报款金额（含税）</th>
                                                <th>报款金额</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="是否使用成本/资本预算">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="预算责任中心">
                                                </td>
												<td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="记账成本中心">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="报款金额（含税）">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" id="exampleInputName2" placeholder="报款金额">
                                                </td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="panel-body">

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">其他</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="card-title">
                        <div class="title">
                            <!--选项卡-->
                            <div class="panel panel-default">

                                <div class="panel-body">
                                    <ul class="nav nav-tabs">
                                        <li class=""><a href="#home" data-toggle="tab" aria-expanded="false">内部人信息</a>
                                        </li>
                                        <li class="active"><a href="#profile" data-toggle="tab" aria-expanded="true">报账单影像</a>
                                    </ul>

                                    <div class="tab-content">
                                        <div class="tab-pane fade" id="home">


                                            <!--表格-->
                                            <div class="panel panel-default">
                                                <!--   <div class="panel-heading">
                                                       Bordered Table
                                                   </div>-->

                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div class="table-responsive table-bordered">
                                                        <table class="table">
                                                            <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>收款人</th>
                                                                <th>所属部门</th>
                                                                <th>员工编号</th>
                                                                <th>收款类型</th>
                                                                <th>公司名称</th>
                                                                <th>开户行</th>
                                                                <th>银行账号</th>
                                                                <th>金额</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td>1</td>
                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="收款人姓名">

                                                                </td>

                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="所属部门">

                                                                </td>
                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="员工编号">

                                                                </td>
                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="收款类型">

                                                                </td>
                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="公司名称">

                                                                </td>
                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="开户行">

                                                                </td>
                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="银行账号">

                                                                </td>
                                                                <td>
                                                                    <input type="text" class="form-control" class="exampleInputName2" placeholder="金额">

                                                                </td>

                                                            </tr>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--
                                                作者：1049794100@qq.com
                                                时间：2018-01-04
                                                描述：表格
                                            -->
                                        </div>
                                        <div class="tab-pane fade active in" id="profile">
                                            <div class="layui-upload">
                                                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                                                <div class="layui-upload-list">
                                                    <table class="layui-table">
                                                        <thead>
                                                        <th>文件名</th>
                                                        <th>大小</th>
                                                        <th>状态</th>
                                                        <th>操作</th>
                                                        </thead>
                                                        <tbody id="demoList"></tbody>
                                                    </table>
                                                </div>
												   <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
														预览图：
														<div class="layui-upload-list" id="demo2"></div>
													</blockquote>
                                                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                                            </div>
                                        </div>

</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

</div>
<!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->

<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="../../assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="../../assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="../../assets/js/jquery.metisMenu.js"></script>
<script src="../../assets/js/select2.full.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".selectbox").select2();
    });

    //查看示例
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    $('.example').on('click', function(){
        layer.open({
            type: 2,
            title: '公务交通示例',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            area : ['80%' , '80%'],
            content: ['../../datamanager/personwork/officialtraffic.html','yes']
        });
    });

    layui.use('upload', function(){
        var $ = layui.jquery
                ,upload = layui.upload;
        //多文件列表示例
        var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                    elem: '#testList'
                    ,url: '/upload/'
                    ,accept: 'file'
                    ,multiple: true
                    ,auto: false
                    ,bindAction: '#testListAction'
                    ,choose: function(obj){
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function(index, file, result){
                            var tr = $(['<tr id="upload-'+ index +'">'
                                ,'<td>'+ file.name +'</td>'
                                ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                ,'<td>等待上传</td>'
                                ,'<td>'
                                ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                                ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                                ,'</td>'
                                ,'</tr>'].join(''));

                            //图片预览
                            $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="yulanimg" id="img-'+ index +'">')

                            //单个重传
                            tr.find('.demo-reload').on('click', function(){
                                obj.upload(index, file);
                            });

                            //删除
                            tr.find('.demo-delete').on('click', function(){
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                console.log(index);
                                var str ='#img-'+index;
                                console.log(str);
                                $(str).remove()
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            demoListView.append(tr);
                        });
                    }
                    ,done: function(res, index, upload){
                        if(res.code == 0){ //上传成功
                            var tr = demoListView.find('tr#upload-'+ index)
                                    ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        }
                        this.error(index, upload);
                    }
                    ,error: function(index, upload){
                        var tr = demoListView.find('tr#upload-'+ index)
                                ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                });

    });
</script>
<!-- Custom Js -->
<script src="../../assets/js/custom-scripts.js"></script>



</body>
</html>
